<template>
    <div class="com-container">
        <!-- 柱状图 -->
        <div ref="chartDom" class="com-chart"></div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
import * as echarts from 'echarts';
import { thousandsFormat } from '@/utils/tools';

@Component({
    name: 'BarChart',
})
export default class BarChart extends Vue {
    @Prop() data;
    chartInstance: any = null;

    @Watch('data', { immediate: true, deep: true })
    onWatchData(newData) {
        if (newData) {
            let that = this;
            this.$nextTick(() => {
                that.updateChart(newData);
            });
        }
    }

    mounted() {
        this.initChart();
    }

    initChart() {
        this.chartInstance = echarts.init(this.$refs.chartDom);
        const initOption = {
            grid: {
                top: '10%',
                // bottom: '20px',
                // x: '15%', // x 偏移量
                // y: '7%', // y 偏移量
                width: '90%', // 宽度
                height: '72%', // 高度
                left: '2%',
                right: '2%',
            },
            legend: {
                show: true,
                icon: 'circle',
                bottom: '0',
                itemHeight: 6, // 修改icon图形大小
                itemWidth: 6,
                textStyle: { fontSize: 10 },
                selectedMode: false,
            },
            tooltip: {},
            xAxis: {
                type: 'category',
                nameTextStyle: { color: 'red' },
                axisTick: { show: false, inside: true },
                axisLine: {
                    lineStyle: {
                        color: '#efefef',
                    },
                },
                axisLabel: {
                    fontSize: 10,
                    color: '#9999b3',
                },
            },
            yAxis: {
                show: false,
                axisTick: { show: false },
                axisLine: { show: false },
                splitLine: { show: false },
            },
            // Declare several bar series, each will be mapped
            // to a column of dataset.source by default.
            series: [
                { type: 'bar', color: '#9fcaa3', label: { show: true, formatter: '{@公募}', position: 'top', color: '#333' } },
                { type: 'bar', color: '#feb885', label: { show: true, formatter: '{@集合}', position: 'top', color: '#333' } },
                { type: 'bar', color: '#478597', label: { show: true, formatter: '{@单一}', position: 'top', color: '#333' } },
            ],
        };

        this.chartInstance.setOption(initOption);

        // 点击事件
        this.chartInstance.on('click', param => {
            console.log(param, 'param');
            this.$emit('handleBarClick', param);
        });
    }
    updateChart(e) {
        const dataOption = {
            dataset: e,
            legend: { show: e.source.length > 0 },
        };
        this.chartInstance.setOption(dataOption);
    }
    screenAdapter() {
        const titleFontSize = ((this.$refs.chartDom as any).offsetWidth / 100) * 5.6;
        // 分辨率变化图表配置
        const adapterOption = {
            axisLabel: {
                textStyle: {
                    fontSize: titleFontSize,
                },
            },
            // 柱状条目
            series: [
                {
                    barWidth: titleFontSize,
                },
            ],
        };
        this.chartInstance.setOption(adapterOption);
        this.chartInstance.resize();
    }

    destroyed() {
        // window.removeEventListener('resize', this.screenAdapter);
    }
}
</script>

<style scoped>
.com-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.com-chart {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
